<template>
    <div class="mt-3">
        <div class="level">
            <img :src="avatar" width="200" height="200">
            <h1 v-text="user.name"></h1>
        </div>

        <form v-if="canUpdate" method="POST" enctype="multipart/form-data">
            <image-upload name="avatar" class="mr-1" @loaded="onLoad"></image-upload>
        </form>

    </div>

</template>

<script>
    export default {
        props: ['user'],
        data() {
            return {
                avatar: '/' + this.user.avatar_path,
            }
        },
        computed: {
            canUpdate() {
                return this.authorize(user => user.id === this.user.id)
            }
        },
        methods: {
            onLoad(avatar) {
                this.avatar = avatar.src;
                this.persist(avatar.file);
            },
            persist(avatar) {
                let data = new FormData();
                data.append('avatar', avatar);
                axios.post(`/api/users/${this.user.id}/avatar`, data)
                    .then(() => flash('Avatar uploaded!'));
            }
        }
    }
</script>
